<template>
  <div class="bookmark-container">
    <div class="search-bar">
      <el-input v-model="searchQuery" placeholder="搜索..." @input="search" class="search-input"></el-input>
      <div class="button-group">
        <el-button class="button" type="primary" @click="handleAddButtonClick">新增</el-button>
        <!-- 添加表单 -->
        <div v-if="showForm">
          <!-- 这里放置表单的代码 -->
          <el-dialog title="新增网址" :visible="showForm" @close="closeForm">
            <el-form :model="form" ref="form" :rules="rules" label-width="80px">
              <el-form-item label="标题" prop="title">
                <el-input v-model="form.title"></el-input>
              </el-form-item>
              <el-form-item label="链接" prop="url">
                <el-input v-model="form.url"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="closeForm">取消</el-button>
              <el-button type="primary" @click="handleSubmit">确定</el-button>
            </span>
          </el-dialog>
        </div>

        <el-button class="button" type="danger" @click="handleDeleteButtonClick">删除</el-button>
        <!-- 添加删除表单 -->
        <div v-if="showDeleteForm">
          <el-dialog title="删除网址" :visible="showDeleteForm" @close="cancelDelete">
            <el-form :model="form" ref="form" :rules="rules" label-width="80px">
              <el-form-item label="标题" prop="title">
                <el-input v-model="form.title"></el-input>
              </el-form-item>
              <el-form-item label="链接" prop="url">
                <el-input v-model="form.url"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="cancelDelete">取消</el-button>
              <el-button type="primary" @click="confirmDelete">确定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
    <div class="bookmark-list">
      <div class="bookmark-item" v-for="(bookmark, index) in filteredBookmarks" :key="index" >
        <el-card :body-style="{ padding: '20px' }" :style="{ backgroundColor: getRandomColor()}">
          <a :href="bookmark.url" class="bookmark-link" target="_blank">{{ bookmark.title }}</a>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      bookmarks: [
        { title: '谷歌1', url: 'https://www.google.com' },
        { title: '百度1', url: 'https://www.baidu.com' },
        { title: '知乎1', url: 'https://www.zhihu.com' },
      ],
      searchQuery: '',
      showForm: false, // 添加变量
      showDeleteForm: false, // 添加变量
      deleteTitle: '', // 添加变量
      form: {
        title: '',
        url: '',
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
        ],
        url: [
          { required: true, message: '请输入链接', trigger: 'blur' },
        ],
      },
    };
  },
  computed: {
    filteredBookmarks() {
      if (this.searchQuery) {
        return this.bookmarks.filter((bookmark) =>
          bookmark.title.toLowerCase().includes(this.searchQuery.toLowerCase())
        );
      } else {
        return this.bookmarks;
      }
    },
  },
  methods: {
    search() {
      // 处理搜索逻辑
    },
    handleAddButtonClick() {
      // 处理按钮1点击逻辑
      this.showForm = true; 

    },
    closeForm() {
      this.showForm = false;
      this.$refs.form.resetFields(); // 清空表单数据
    },
    handleSubmit() {
      //新增axios
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，执行提交逻辑
          //console.log('表单提交:', this.form)
          this.$axios.post('http://localhost:8181/Navigation/handleSubmit',this.form)
          .then(resp => {
            // 处理响应结果
            console.log(resp.data);
            this.$message({
              message: '新增成功',
              type: 'success'
            });
            // 刷新浏览器
            window.location.reload();
          }).catch(error => {
              // 处理错误
              console.error(error);
          });
        this.showForm = false;
        }
      })
    },
    handleDeleteButtonClick() {
      // 处理按钮2点击逻辑
      this.showDeleteForm = true; // 点击删除按钮时显示删除表单
    },
    cancelDelete() {
    this.showDeleteForm = false; // 取消删除时隐藏删除表单
    this.deleteTitle = ''; // 清空删除表单输入的数据
    },
    confirmDelete() {
     //删除axios
     this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，执行提交逻辑
          //console.log('表单提交:', this.form)
          this.$axios.post('http://localhost:8181/Navigation/confirmDelete',this.form)
          .then(resp => {
            // 处理响应结果
            console.log(resp.data);
            this.$message({
              message: '删除成功',
              type: 'error'
            });
            // 刷新浏览器
            window.location.reload();
          }).catch(error => {
              // 处理错误
              console.error(error);
          });
          this.showDeleteForm = false;
        }
      })  
    },
    getRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    },
    fetchData() {
      this.$axios.get("http://localhost:8181/Navigation/fillAll")
        .then(response => {
          console.log(response.data.data);
          this.bookmarks = response.data.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
  mounted(){
    this.fetchData();
  },
};
</script>

<style>
.bookmark-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
}

.search-bar {
  display: flex;
  align-items: center;
}

.button-group {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.button {
  margin-left: 10px;
}

.bookmark-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.bookmark-item {
  width: 200px;
}

.bookmark-item:hover {
  transform: scale(1.1); /* 在悬停时将卡片放大1.1倍 */
  transition: transform 0.3s ease; /* 添加过渡效果 */
}

.el-input {
  flex: 1;
  margin-right: 10px;
}

.el-card {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bookmark-link {
  font-size: 30px;
}

.random-color {
  background-color: var(--random-color);
}
</style>